<!DOCTYPE html>
<html>
	<head>
		<style>
			body {
				position: relative;
				margin: 0 auto;
				width: 950px;
				height: 1900px;
			}
			.test1 {
				position: absolute;
				padding: 40px;
				top: 300px;
				left: 50px;
				width: 40px;
				height: 40px;
				border: 1px solid #000;
				overflow: scroll;
			}
			.test2 {
				position: absolute;
				padding: 40px;
				top: 1800px;
				left: 50px;
			}
		</style>
	</head>
	<body>
		<div class="test1" id="test_1">
			<p>
				test
			</p>
			<p>
				test
			</p>
			<p>
				test
			</p>
			<p>
				test
			</p>
			<p>
				test
			</p>
			<p>
				test
			</p>
			<p>
				test
			</p>
			<p>
				test
			</p>
		</div>
		<div class="test2" id="test_2">
			test
		</div>
		<script>
			var node1 = document.getElementById('test_1');
			var node2 = document.getElementById('test_2');
			console.log(node1.offsetHeight);
			console.log(node1.scrollHeight);
			console.log(node1.clientHeight);
			console.log(window.innerHeight);
//			console.log(node1.offsetLeft);
//          console.log(node1.scrollLeft);
//          console.log(node1.clientLeft);
			alert(window.screen.height);
			alert(window.screen.availHeight);
			console.log(document.documentElement);
			console.log(document.documentElement.clientHeight);
			console.log(node1.getClientRects());
			console.log(node1.getBoundingClientRect());
			node1.onclick = function(e) {
				console.log(e.pageY + '>' + e.offsetY + '>' + e.clientY + '>' + e.screenY);
			}
		</script>
	</body>
</html>